<template>
  <div>
    <Nav />
    <el-card>
      <el-row>
        <el-col :span="4">申请人:{{ name }}</el-col>
        <el-col :span="4">申请人电话:{{phone}}</el-col>
        <el-col :span="5">申请人域账号:{{ jobAccount }}</el-col>
      </el-row>
      <div class="form-content">
        <p>招投标流程</p>
        <el-form ref="form" class="form-input" :model="formDate" :rules="ruleData" label-width="120px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="项目名称" prop="projectName">
                <el-input v-model="formDate.projectName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="项目编号" prop="projectNo">
                <el-input v-model="formDate.projectNo"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="招标代理名称" prop="projectAgentName">
                <el-input v-model="formDate.projectAgentName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="招标人名称" prop="projectBidPerson">
                <el-input v-model="formDate.projectBidPerson"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="投标人名称" prop="projectTenderPerson">
                <el-input v-model="formDate.projectTenderPerson"></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="活动名称">
                <el-input></el-input>
              </el-form-item>
            </el-col> -->
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="下一流程">
                <el-input v-model="nextNodeNameContent" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="下一流程人员" prop="nextAuthor">
                <el-select placeholder="请选择下一流程人员" v-model="formDate.nextAuthor" multiple @change="handleChange" style="width: 100%">
                  <el-option v-for="(item, index) in nextAuthorLists" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="上传">
              <UploadFile @getfiles="getfiles" />
            </el-form-item>
          </el-row>
          <div class="btn-option">
            <el-button type="primary" @click="submit">提交</el-button>
            <el-button @click="Parent">取消</el-button>
          </div>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getMultipleLabel, getFileId } from '@/unils/utils'
import uploadFile from '@/view/audit/flow/upload'
import { mapGetters } from 'vuex'
import swal from 'sweetalert'
import _ from 'underscore'
import nav from "@/components/navigation"
export default {
  components: {
    Nav: nav,
    UploadFile: uploadFile
  },
  data () {
    return {
      nextNodeNameContent: '2.0清单整理',
      formDate: {
        projectName: '',
        projectNo: '',
        projectAgentName: '',
        projectBidPerson: '',
        projectTenderPerson: '',
        nextAuthor: [],
        file: []
      },
      labelName: '',
      nextAuthorLists: [],
      ruleData: {
        projectName: [
          { required: true, message: '请输入项目名称', trigger: 'blur' },
        ],
        projectNo: [
          { required: true, message: '请输入项目编号', trigger: 'blur' },
        ],
        projectAgentName: [
          { required: true, message: '请输入招标代理名称', trigger: 'blur' },
        ],
        projectBidPerson: [
          { required: true, message: '请输入招标人名称', trigger: 'blur' },
        ],
        projectTenderPerson: [
          { required: true, message: '请输入投标人名称', trigger: 'change' },
        ],
        selectedRegions: [
          { required: true, message: '请输入地区', trigger: 'change' },
        ],
        nextAuthor: [
          { required: true, message: '请选择下一流程人员', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['name', 'jobAccount', 'phone'])
  },
  mounted () {

  },
  methods: {
    handleChange (val) {
      this.labelName = getMultipleLabel(val, this.nextAuthorLists)
    },
    getfiles (e) {
      this.formDate.file = e
    },
    submit: _.debounce(async function () {
      await this.$refs.form.validate(async (valid) => {
        if (!valid) return false
        if (this.formDate.file.length == 0) {
          swal('错误', '未提交上传文件', 'warning')
          return false
        }
        let msg = '是否确认提交，提交后不可修改!'
        await this.confirm(msg, async () => {
          // let fileObj = await this.getFileId()
          // let params = {

          // }

        })
      })
    }, 500),
    Parent () {
      this.$router.go(-1)
    },
  },
}
</script>
<style lang="less" scoped>
.form-content {
  p {
    text-align: center;
    font-size: 30px;
    margin-bottom: 40px;
  }
  .form-input {
    width: 70%;
    margin: auto;
    .btn-option {
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>